<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学校四级联动</title>
</head>

<body>
    <!-- 
        四级联动HTML基本框架
        院 班级 寝室 个人
     -->
    <!-- 表单 -->
    <form>
        <!-- 下拉列表 -->
        <select id="fac"">             <!--院系-->
           
            <option>请选择</option>
        </select>
        <select id="cla"></select>        <!--班级-->
        
        <select id="dor"></select>    <!--寝室-->
        
        <select id="per"></select>    <!--个人-->
        
    </form>
</body>
<script>
    // 定义数组
    var facArr = ["信息学院", "人文学院", "经济管理学院", "网络技术学院"];          //院系 
    var claArr = [                                                                    //班级  
        ["计应一班"],["会计一班"],["经管一班"],["计网一班"]
    ];
    var dorArr = [
        // 信息学院
        [
            [
                ["01"],["02"]
            ]
        ],
        // 人文学院
        [
            [
                ["05"],["06"]
            ]
        ],
        // 经济管理学院
        [
            [
                ["33"],["34"]
            ]            
        ],
        // 网络技术学院
        [
            [
                ["77"],["76"]
            ]            
        ]
    ];
    var perArr = [
        // 信息学院
        [
            [
                [
                    ["王彩玲"], ["小刘"]
                ],
                [
                    ["小王"], ["小李"]
                ]
            ]                                  
        ],
        // 人文学院
        [
            [
                [
                     ["小李"], ["小黄"]
                ],
                [
                     ["小马"], ["小苏"]
                ]
            ]    
        ],
        // 经济管理学院
        [
            [
                [
                    ["王秀芹"], ["王彩玲"]
                ],
                [
                    ["小李"], ["小黄"]
                ]
            ],
        ],
        // 网络技术学院
        [
            [
                [
                    ["小苏"], ["小陈"]
                ],
                [
                    ["王介"], ["王丽"]
                ]
            ], 
        ]
    ];




    // 1、创建数组填充的方法
    function createOpen(obj, data) {
        for (var i in data) {
            // 通过Option()构造函数创建option对象
            var opt = new Option(data[i], i);    //通过遍历数组的下标将数组元素添加至option
            obj.options.add(opt);               //添加到options集合中
        }
    }

    //2、 获取option对象

    // 院系
    var fac = document.getElementById("fac");       //返回对拥有指定ID的第一个对象的引用
    createOpen(fac, facArr);                       //将院系数据添加到Option对象

    // 班级
    var cla = document.getElementById("cla");
    fac.onchange = function () {
        cla.options.length = 0; //清空garde下的原数据添加到Option对象
        createOpen(cla, claArr[fac.value]); //通过院系点击后选择的数据来获取与班级对应下标的数据

        //通过院系点击后选择的数据来获取与班级对应下标的数据
        if (fac.value >= 0) {
            cla.onchange();    //当用户没有选择默认选项,则将院系的数据填充到select
        } else {
           cla.options.length = 0;    //如果用户点击默认选项,则清空cla下拉框数据
        }
    };

    // 寝室
    var dor = document.getElementById("dor");
    cla.onchange = function () {
        dor.options.length =  0;  //清空dor下的原数据添加到Option对象  
        createOpen(dor, dorArr[fac.value][cla.value]);
        if (fac.value >= 0) {
            dor.onchange();    //当用户没有选择默认选项,则将院系的数据填充到select
        } else {
            dor.options.length = 0;    //如果用户点击默认选项,则清空garde下拉框数据
        }

    };
    //个人
    var per = document.getElementById("per");
    dor.onchange = function () {
        per.options.length = 0;   //为了防止在三个选择框都选中的情况下,country下标依旧为的0的情况
        createOpen(per, perArr[fac.value][cla.value][dor.value]);
    };

</script>

</html>